﻿@model List<CoffeeShop.Models.Entities.Office>

@{
    ViewBag.Title = "Quản lý chi nhánh";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

<div class="breadcrumbs" id="breadcrumbs">
    <ul class="breadcrumb">
        <li>
            <i class="icon-home home-icon"></i>
            <a href="/Home/Index">Trang chủ</a>

            <span class="divider">
                <i class="icon-angle-right arrow-icon"></i>
            </span>
        </li>
        <li class="active">Quản lý chi nhánh</li>
    </ul>
    <!--.breadcrumb-->
</div>

<div class="page-content">
    <div>
        <h1 class="row-fluid header smaller lighter purple">
            <span class="span9">Quản lý chi nhánh</span>
            <span class="span3">
                <a data-toggle="modal" href="#tblAddOfice" class="pull-right inline">
                    <button class="btn btn-primary" id="btnAdd">
                        <i class="icon-plus"></i>
                        Thêm mới
                    </button>
                </a>
            </span>
        </h1>
    </div>

    <div class="row-fluid" id="tableListOffice">
        @Html.Partial("_OfficeTable", Model)
    </div>

    <!-- Add new office form -->
    <div id="tblAddOfice" class="modal hide" tabindex="-1">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h4 class="blue bigger">Thông tin chi nhánh</h4>
        </div>

        <form id="formAddOffice">
            <div class="modal-body overflow-visible">
                <div class="row-fluid">
                    <div class="span5">
                        <div class="control-group">
                            <div class="controls">
                                <div class="ace-file-input ace-file-multiple">
                                    <input type="file" id="id-input-file-1">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="vspace"></div>

                    <div class="span7">
                        <div class="control-group" id="officeNameGroup">
                            <div class="controls">
                                <input type="text" id="txtOfficeName" name="txtOfficeName" placeholder="Tên chi nhánh">
                                <div id="existedOfficeName" style="display: none" class="help-block">
                                    Tên chi nhánh đã được sử dụng!
                                </div>
                            </div>
                        </div>

                        <div class="control-group">
                            <div class="controls">
                                <input type="text" id="txtOfficeAddress" name="txtOfficeAddress" placeholder="Địa chỉ">
                            </div>
                        </div>

                        <div class="control-group">
                            <div class="controls">
                                <input type="text" class="input-medium input-mask-phone" id="txtPhoneNumber" name="txtPhoneNumber" placeholder="Số điện thoại">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <div class="modal-footer">
            <button class="btn btn-small" data-dismiss="modal">
                <i class="icon-remove"></i>
                Quay lại
            </button>

            <button class="btn btn-small btn-primary" onclick="addOffice()">
                <i class="icon-ok"></i>
                Lưu
            </button>
        </div>
    </div>
    <!-- End add new office form -->

    <!-- Update office form -->
    <div id="tblUpdateOfice" class="modal hide" tabindex="-1">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h4 class="blue bigger">Thông tin chi nhánh</h4>
        </div>

        <form id="formUpdateOffice">
            <div class="modal-body overflow-visible">
                <div class="row-fluid">
                    <div class="span5">
                        <div class="control-group">
                            <div class="controls">
                                <div class="ace-file-input ace-file-multiple">
                                    <input type="file" id="updateAvatarOfice">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="vspace"></div>

                    <div class="span7">
                        <!-- OfficeID -->
                        <input type="text" id="txtUpdateOfficeId" name="txtUpdateOfficeId" style="display: none">

                        <div class="control-group" id="officeUpdateNameGroup">
                            <div class="controls">
                                <input type="text" class="span12" id="txtUpdateOfficeName" name="txtUpdateOfficeName" placeholder="Tên chi nhánh">
                                <div id="existedUpdateOfficeName" style="display: none" class="help-block">
                                    Tên chi nhánh đã được sử dụng!
                                </div>
                            </div>
                        </div>

                        <div class="control-group">
                            <div class="controls">
                                <textarea class="span12" id="txtUpdateOfficeAddress" name="txtUpdateOfficeAddress" placeholder="Địa chỉ"></textarea>
                            </div>
                        </div>

                        <div class="control-group">
                            <div class="controls">
                                <input type="text" class="span5" id="txtUpdatePhoneNumber" name="txtUpdatePhoneNumber" placeholder="Số điện thoại">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <div class="modal-footer">
            <button class="btn btn-small" data-dismiss="modal">
                <i class="icon-remove"></i>
                Quay lại
            </button>

            <button id="btnUpdate" class="btn btn-small btn-primary" onclick="updateOffice()" style="display: none">
                <i class="icon-ok"></i>
                Chỉnh sửa
            </button>

            <button id="reuseOffice" class="btn btn-small btn-warning" onclick="resetOffice()" style="display: none">
                <i class="icon-ok"></i>
                Sử dụng lại
            </button>
        </div>
    </div>
    <!-- End edit office form -->
</div>

<script type="text/javascript">

    $(function () {
        $('#id-input-file-1').ace_file_input({
            style: 'well',
            btn_choose: 'Kéo thả ảnh hoặc click chuột vào đây!',
            btn_change: null,
            no_icon: 'icon-cloud-upload',
            droppable: true,
            thumbnail: 'large',
            preview_error: function (filename, error_code) {
            }
        }).on('change', function () {
        });

        $('#updateAvatarOfice').ace_file_input({
            style: 'well',
            btn_choose: 'Kéo thả ảnh hoặc click chuột vào đây!',
            btn_change: null,
            no_icon: 'icon-cloud-upload',
            droppable: true,
            thumbnail: 'large',
            preview_error: function (filename, error_code) {
            }
        }).on('change', function () {
        });

        validateAddOffice("#formAddOffice");
        validateUpdateOffice("#formUpdateOffice");
    })

    // Validate Add Form
    function validateAddOffice(validateForm) {
        $(validateForm).validate({
            errorElement: 'div',
            errorClass: 'help-block',
            focusInvalid: false,
            rules: {
                txtOfficeName: {
                    required: true,
                    maxlength: 50
                },
                txtOfficeAddress: {
                    required: true,
                    maxlength: 250
                },
                txtPhoneNumber: {
                    required: true,
                    digits: true,
                    minlength: 10,
                    maxlength: 15
                }
            },
            messages: {
                txtOfficeName: {
                    required: "Xin hãy nhập tên chi nhánh!",
                    maxlength: "Tên chi nhánh tối đa 50 ký tự!"
                },
                txtOfficeAddress: {
                    required: "Xin hãy nhập địa chỉ!",
                    maxlength: "Địa chỉ tối đa 250 ký tự!"
                },
                txtPhoneNumber: {
                    required: "Xin hãy nhập số điện thoại!",
                    digits: "Chỉ có thể nhập ký tự số!",
                    minlength: "Số điện thoại tối thiểu 10 ký tự số!",
                    maxlength: "Số điện thoại tối đa 15 ký tự số!"
                }
            },
            highlight: function (e) {
                $(e).closest('.control-group').removeClass('info').addClass('error');
            },
            success: function (e) {
                $(e).closest('.control-group').removeClass('error').addClass('info');
                $(e).remove();
            }
        });
    }

    // Validate Update Form
    function validateUpdateOffice(validateForm) {
        $(validateForm).validate({
            errorElement: 'div',
            errorClass: 'help-block',
            focusInvalid: false,
            rules: {
                txtUpdateOfficeName: {
                    required: true,
                    maxlength: 50
                },
                txtUpdateOfficeAddress: {
                    required: true,
                    maxlength: 250
                },
                txtUpdatePhoneNumber: {
                    required: true,
                    digits: true,
                    minlength: 10,
                    maxlength: 15
                }
            },
            messages: {
                txtUpdateOfficeName: {
                    required: "Xin hãy nhập tên chi nhánh!",
                    maxlength: "Tên chi nhánh tối đa 50 ký tự!"
                },
                txtUpdateOfficeAddress: {
                    required: "Xin hãy nhập địa chỉ!",
                    maxlength: "Địa chỉ tối đa 250 ký tự!"
                },
                txtUpdatePhoneNumber: {
                    required: "Xin hãy nhập số điện thoại!",
                    digits: "Chỉ có thể nhập ký tự số!",
                    minlength: "Số điện thoại tối thiểu 10 ký tự số!",
                    maxlength: "Số điện thoại tối đa 15 ký tự số!"
                }
            },
            highlight: function (e) {
                $(e).closest('.control-group').removeClass('info').addClass('error');
            },
            success: function (e) {
                $(e).closest('.control-group').removeClass('error').addClass('info');
                $(e).remove();
            }
        });
    }

    // Show message error when insert new Office
    function showMessageError() {
        $.gritter.add({
            title: 'Tạo mới chi nhánh thất bại!',
            text: 'Xin hãy kiểm tra lại thông tin đã nhập hoặc kết nối với cơ sở dữ liệu',
            time: '1000',
            class_name: 'gritter-error'
        });
        return false;
    }

    // Show message success when insert new Office
    function showMessageSuccess() {
        $.gritter.add({
            title: 'Tạo mới chi nhánh thành công!',
            text: 'Thông tin chi nhánh vừa nhập đã được tạo!',
            time: '1000',
            class_name: 'gritter-info'
        });
        return false;
    }

    // Cleanning add form when user finish insert a new office
    function clearFormAddOffice() {
        $('#txtOfficeName').val('');
        $('#txtOfficeAddress').val('');
        $('#txtPhoneNumber').val('');
    }

    // Add a new office method
    function addOffice() {
        if ($('#formAddOffice').valid()) {
            editFr = $('#tblAddOfice').val();
            var officeName = $('#txtOfficeName', editFr).val();
            var officeAddress = $('#txtOfficeAddress', editFr).val();
            var officePhone = $('#txtPhoneNumber', editFr).val();

            $.post("/Office/CreateOffice", {
                txtOfficeName: officeName, txtOfficeAddress: officeAddress, txtPhoneNumber: officePhone
            }, function (result) {
                if (result == "ExistedOffice") {
                    // Show error duplicate message
                    $('#existedOfficeName').attr("style", "display: block");
                    $('#officeNameGroup').removeClass('info').addClass('error');
                }
                if (result == "Successful") {
                    $('.close').click();
                    reloadTable();
                    clearFormAddOffice();
                    showMessageSuccess();
                }
                if (result == "FailAddNewOffice") {
                    $('.close').click();
                    clearFormAddOffice();
                    showMessageError();
                }
            }).error(function () {
                $('.close').click();
                showMessageError();
            });
        }
    }

    function resetOffice() {
        $("#btnUpdate").attr("style", "display: normal");
        $("#reuseOffice").attr("style", "display: none");

        $("#txtUpdateOfficeId").prop('readonly', true);
        $("#txtUpdateOfficeName").prop('readonly', false);
        $("#txtUpdateOfficeAddress").prop('readonly', false);
        $("#txtUpdatePhoneNumber").prop('readonly', false);
    }

    // Get an office by OfficeId
    function getOfficeById(officeId) {
        $.ajax({
            url: '@Url.Action("GetOfficeById", "Office")',
            type: 'GET',
            cache: false,
            data: { officeId: officeId },
            success: function (data) {
                if (data.IsDeleted == true) {
                    $("#btnUpdate").attr("style", "display: none");
                    $("#reuseOffice").attr("style", "display: normal");

                    $("#txtUpdateOfficeId").val(data.ID).prop('readonly', true);
                    $("#txtUpdateOfficeName").val(data.Name).prop('readonly', true);
                    $("#txtUpdateOfficeAddress").val(data.Address).prop('readonly', true);
                    $("#txtUpdatePhoneNumber").val(data.PhoneNumber).prop('readonly', true);
                }
                else {
                    $("#btnUpdate").attr("style", "display: normal");
                    $("#reuseOffice").attr("style", "display: none");

                    $("#txtUpdateOfficeId").val(data.ID).prop('readonly', false);
                    $("#txtUpdateOfficeName").val(data.Name).prop('readonly', false);
                    $("#txtUpdateOfficeAddress").val(data.Address).prop('readonly', false);
                    $("#txtUpdatePhoneNumber").val(data.PhoneNumber).prop('readonly', false);
                }
            },
            error: function (data) {
                alert('Không thể lấy dữ liệu. Xin hãy thử lại!');
            }
        });
    }

    // Show message success when update a new Office
    function showMessageUpdateSuccess() {
        $.gritter.add({
            title: 'Cập nhật chi nhánh thành công!',
            text: 'Thông tin chi nhánh đã được cập nhật!',
            time: '1000',
            class_name: 'gritter-info'
        });
        return false;
    }

    // Show message error when update a new Office
    function showMessageUpdateError() {
        $.gritter.add({
            title: 'Cập nhật chi nhánh thất bại!',
            text: 'Xin hãy kiểm tra lại thông tin đã nhập hoặc kết nối với cơ sở dữ liệu',
            time: '1000',
            class_name: 'gritter-error'
        });
        return false;
    }

    // Cleanning update form when user finish insert a new office
    function clearFormUpdateOffice() {
        $('#txtUpdateOfficeId').val('');
        $('#txtUpdateOfficeName').val('');
        $('#txtUpdateOfficeAddress').val('');
        $('#txtUpdatePhoneNumber').val('');
    }

    // Update method
    function updateOffice() {
        if ($('#formUpdateOffice').valid()) {
            editFr = $('#tblUpdateOfice').val();
            var officeId = $('#txtUpdateOfficeId', editFr).val();
            var officeName = $('#txtUpdateOfficeName', editFr).val();
            var officeAddress = $('#txtUpdateOfficeAddress', editFr).val();
            var officePhone = $('#txtUpdatePhoneNumber', editFr).val();

            $.post("/Office/UpdateOffice", {
                txtUpdateOfficeId: officeId, txtUpdateOfficeName: officeName, txtUpdateOfficeAddress: officeAddress, txtUpdatePhoneNumber: officePhone
            }, function (result) {
                if (result == "ExistedOfficeName") {
                    // Show error duplicate message
                    $('#existedUpdateOfficeName').attr("style", "display: block");
                    $('#officeUpdateNameGroup').removeClass('info').addClass('error');
                }
                if (result == "Successful") {
                    $('.close').click();
                    reloadTable();
                    clearFormUpdateOffice();
                    showMessageUpdateSuccess();
                }
                if (result == "FailUpdateOffice") {
                    $('.close').click();
                    clearFormUpdateOffice();
                    showMessageUpdateError();
                }
            }).error(function () {
                $('.close').click();
                showMessageUpdateError();
            });
        }
    }

    // Reload table when users finish update or insert a office
    function reloadTable() {
        $.ajax({
            url: "/Office/LoadAllOffice",
            type: "POST",
            success: function (data) {
                $('#tableListOffice').html(data);
            }
        });
    }

</script>
